<template>
  <div>
    <Row>
      <Card>
        <p slot="title">
          <Icon type="navicon-round"></Icon>
          离园申请管理
        </p>
        <VmBtable type="edit" ref="VmBtable"
                  :columns="dataColumns"
                  :data="dataTable"
                  :searchparam="searchParam"
                  :exportBtn="false"
                  :importBtn="false"
                  :batchDelBtn="false"
                  :isControl="false"
                  :operate="operate"
                  v-on:searchFn="searchFn"
                  v-on:page-change="pageChangeFn"
                  v-on:addFn="addFn"
                  v-on:deleteFn="deleteFn"
                  placeholder="学生名字关键字"
                  searchText="学生名："
                  cleanText="刷新"
                  exportPath="exportPath"
                  v-on:restFn="restFn">
          <div slot="search" class="db_inline">
            班级：
            <Select v-model="searchParam.clazzId" @on-change="queryFn" style="width:130px">
              <Option v-for="item in clazzList" :value="item.id" :key="item.id">{{item.gradeName}}-{{ item.name }}
              </Option>
            </Select>
            状态：
            <Select v-model="searchParam.status" @on-change="queryFn" style="width:90px">
              <Option v-for="item in statusList" :value="item.id" :key="item.id">{{ item.name }}
              </Option>
            </Select>
            申请时间：
            <DatePicker type="date" placeholder="开始时间" v-model="searchParam.bTime" @on-change="searchParam.bTime=$event"
                        style="width: 110px"></DatePicker>
            至
            <DatePicker type="date" placeholder="结束时间" v-model="searchParam.eTime" @on-change="searchParam.eTime=$event"
                        style="width: 110px"></DatePicker>
          </div>
        </VmBtable>
      </Card>
    </Row>
    <Modal v-model="modal.visible" :title="modal.title" width="430">
      <div style="height: 120px">
        {{modal.form.reason}}
      </div>
    </Modal>
    <Modal v-model="detail.visible" :title="detail.title" width="430">
      <div style="height: 120px;text-align: center;line-height: 60px;font-size: 16px;">
        <Row style="border-bottom: dashed 1px">
          <Col span="12">
            进园时间：{{detail.form.inTime}}
          </Col>
          <Col span="12">
            家长：{{detail.form.sendPerson}}
          </Col>
        </Row>
        <Row>
          <Col span="12"> 离园时间：{{detail.form.outTime}}</Col>
          <Col span="12"> 家长：{{detail.form.outPerson}}</Col>
        </Row>
      </div>
    </Modal>
  </div>
</template>

<script>
  import API from "@/api/api";
  import VmBtable from "@/components/vm/vm-btable";
  import Cookie from "js-cookie"

  export default {
    components: {
      VmBtable
    },
    data() {
      return {
        searchParam: {
          current: 1,
          size: 20,
          total: 0,
          studentName: '',
          clazzId: '',
          bTime: '',
          eTime: '',
          status: ''
        },
        exportPath: Cookie.getJSON('cdnUrl'),
        dataColumns: [
          {
            title: '序号',
            type: 'index',
            align: 'center',
            minWidth: 100,
          },
          {
            title: '班级',
            key: 'clazzName',
            align: 'center',
            minWidth: 160,
          },
          {
            title: '名字',
            key: 'clazzName',
            align: 'center',
            minWidth: 120,

          },
          {
            title: '申请人',
            key: 'whoApply',
            align: 'center',
            minWidth: 120,
          },
          {
            title: '申请时间',
            key: 'createTime',
            align: 'center',
            sortable: true,
            sortType: 'desc',
            minWidth: 180,
          },
          {
            title: '状态',
            key: 'status',
            align: 'center',
            minWidth: 100,
            render: (h, param) => {
              let des = '未离园';
              let color = 'orange';
              if (param.row.status) {
                des = '已离园';
                color = 'green';
              }
              return h('div', {style: {color: color}}, des);
            }
          },
          {
            title: '操作',
            align: 'center',
            minWidth: 160,
            render: (h, params) => {
              let btn = [];
              let detailBtn = h('Button', {
                props: {
                  type: 'info',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.detailFn(params.row)
                  }
                }
              }, '接送情况');
              let checkBtn = h('Button', {
                props: {
                  type: 'info',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.checkFn(params.row)
                  }
                }
              }, '查看');
              if (params.row.status) {
                btn.push(detailBtn);
              }
              btn.push(checkBtn);
              return h('div', btn);
            }
          }
        ],
        operate: [],
        dataTable: [],
        clazzList: [],
        statusList: [
          {id: 0, name: '未离园'},
          {id: 1, name: '已离园'},
        ],
        modal: {
          visible: false,
          title: '',
          loading: false,
          form: {
            reason: '',
          },
          rules: {
            'name': [{
              required: true,
              trigger: 'blur',
              message: '必填项'
            }]
          }
        },
        detail: {
          visible: false,
          title: '',
          form: {
            inTime: '',
            sendPerson: '',
            outTime: '',
            outPerson: '',
          }
        }
      };
    },
    methods: {
      addFn() {
        Object.assign(this.modal, {
          visible: true,
          title: '添加',
          form: {}
        })
      },
      detailFn(data) {
        let day = data.createTime.split(" ")[0];
        API.fetchPickByStuIdAndDay({studentId: data.studentId, day: day}).then(resp => {
          Object.assign(this.detail, {
            visible: true,
            title: data.studentName + day + '的接送情況',
            form: resp.data
          })
        })
      },
      checkFn(data) {
        Object.assign(this.modal, {
          visible: true,
          title: '离园原因',
          form: data
        })
      },
      deleteFn(data) {

      },
      restFn() {
        this.searchParam.current = 1;
        this.searchParam.bTime = '';
        this.searchParam.eTime = '';
        this.searchParam.studentName = '';
        this.searchParam.clazzId = '';
        this.searchParam.status = '';
        this.queryFn();
      },
      queryFn() {
        API.fetchOutApply(this.searchParam).then(
          res => {
            let data = res.data;
            this.dataTable = data.records;
            this.searchParam.total = data.total;
          },
          error => {
            this.$Message.info(error.msg);
          }
        );
      },
      complete() {
        Object.assign(this.modal, {
          visible: false,
          title: '',
          loading: false,
        });
        this.$refs.Form.resetFields();
      },
      subForm() {
        this.$refs.Form.validate(valid => {
          if (valid) {
            let data = Object.assign(this.modal.form);
            if (data.id) {

            } else {

            }
          }
        })
      },
      cancelSub() {

      },
      pageChangeFn(current) {
        this.searchParam.current = current;
        this.queryFn();
      },
      searchFn(value) {
        this.searchParam.studentName = value;
        this.queryFn();
      },
      fetchKindergartenClazz() {
        API.fetchKindergartenClazz().then(resp => {
          this.clazzList = resp.data;
        })
      },
    },
    created() {
    },
    mounted() {
      this.queryFn();
      this.fetchKindergartenClazz();
    }
  }
</script>

<style scoped>

</style>
